<template>
  <load v-if="isShow"></load>
  <div class="mine" v-else-if="!isShow">
    <div class="headshot">
      <div class="imgBox">
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <img src="https://b.yzcdn.cn/vant/icon-demo-1126.png" alt="" />
      </div>
      <div class="content">
        <div>昵称:{{ user.nickName }}</div>
        <div>手机号:{{ user.phone }}</div>
      </div>
    </div>
    <div class="box">
      <div class="right" @click="goCollection">
        <van-icon name="star-o" color="skyblue" />
        <div class="text">我的追漫</div>
      </div>
      <div class="zuo">
        <img src="../static/images/zuo.png" />
        <div class="zuoCon">点击左侧图标更精彩</div>
      </div>
    </div>
    <div class="pai">
      <img src="../static/images/paizong.gif" />
    </div>
    <div class="btn">
      <van-button class="back" @click="quitLogin">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import load from "../components/Load.vue";
export default {
  name: "Mine",
  components: {
    load,
  },
  data() {
    return {
      user: [],
      isShow:true,
    };
  },
  created() {
    this.getLoad()
    let userData = localStorage.getItem("user");
    if (userData) {
      userData = JSON.parse(userData);
    } else {
      userData = [];
    }
    // this.user = userData;
    // console.log(this.user);
    let user = sessionStorage.getItem("user");
    if (user) {
      user = JSON.parse(user);
    } else {
      user = [];
    }
    for (let i = 0; i < userData.length; i++) {
      if (userData[i].phone === user.phone) {
        this.user = userData[i];
      }
    }
  },
  methods: {
    quitLogin() {
      sessionStorage.clear();
      Toast("退出成功");
      setTimeout(() => {
        this.$router.push({
          name: "Login",
        });
      }, 1000);
    },
    goCollection() {
      this.$router.push({
        name: "Collection",
      });
    },
    getLoad(){
      setTimeout(() => {
      this.isShow = false
    },3000);
    }
  },
};
</script>

<style lang="less" scoped>
.mine {
  .headshot {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ff9db5;
    .imgBox {
      width: 60px;
      height: 60px;
      // background-color: blue;
      // border: 1px solid #ff9db5;
      margin-top: 10px;
      margin-left: 10px;
      border-radius: 40px;
      img {
        width: 100%;
      }
    }
    .content {
      font-size: 14px;
      margin-left: 30px;
      color: #90959b;
    }
  }
  .box {
    margin-top: 20px;
    width: 100%;
    border-bottom: 1px solid #ff9db5;
    display: flex;
    height: 80px;
    .van-icon {
      font-size: 50px;
    }
    .right {
      margin-left: 15px;
      // width: 100px;
      // text-align: center;
    }
    .text {
      // display: inline-block;
      color: #90959b;
    }
    .zuo {
      // width: 75px;
      margin-left: 100px;
      display: flex;
      align-items: center;
      img {
        width: 75px;
        height: 75px;
      }
      .zuoCon {
        display: inline-block;
      }
    }
  }
  .pai {
    width: 150px;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  .btn {
    margin-top: 20px;
    text-align: center;
    .back {
      text-align: center;
      width: 320px;
      height: 50px;
      color: #ffffff;
      background-color: #ff9db5;
    }
  }
}
</style>